<script setup lang="ts">
// import "@/assets/css/sigin.css"
import {ElMessage} from "element-plus";
import { ref } from "vue";
import router from "router";
import PostRequest from "util/requests/PostRequest";
import { userInfoStore } from "store/userInfo";
import MyIcon from "@/components/MyIcon.vue";
// 创建PostRequest实例
const  post = new  PostRequest();
const msg="你好!欢迎回来!";
let logins = ref("conmon login");
let registers= ref("conmon register");
const form=ref({
    username: '',
    password: ''
})
const file = ref();
const repassword = ref("")
const registerForm=ref({
    username: '',
    password: '',
    email: '',
})
let isdisplay = ref("")
const toregister=()=> {
  logins.value = 'conmon loginRote'
  registers.value = 'conmon registerRote'
  resetLogin()
}

const tologin = ()=>{
  logins.value = 'conmon login'
  registers.value = 'conmon register'
  resetRegister()
}
const url = ref()
const login = ()=> {
  if (form.value.username == "" ) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Please input username',
      type:"warning"
    })
    registerForm.value.password = ""
    repassword.value = ""
  }else if (form.value.password == "" ) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Please input password',
      type:"warning"
    })
    registerForm.value.password = ""
    repassword.value = ""
  }else {
    post.Login(form.value).then((res:any)=>{
      if(res.code==200)
      {
        const info = userInfoStore();
        info.setInfo(res.obj)
        info.setLoginStatus()
        ElMessage({
          dangerouslyUseHTMLString: true,
          message: res.msg,
          type:"success"
        })
        router.push("/home")
      }else {
        ElMessage({
          dangerouslyUseHTMLString: true,
          message: res.msg+"请重试!",
          type:"error"
        })
        resetLogin()
      }
    })
  }

}
const register = ()=> {
  const formData = new FormData()
  if(registerForm.value.password==""){
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Please input password!',
      type:"warning"
    })
  }
  else if(repassword.value==""){
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Please input repassword!',
      type:"warning"
    })
  }
  else if(registerForm.value.username==""){
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Please input username!',
      type:"warning"
    })
  }else if(registerForm.value.email==""){
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Please input email!',
      type:"warning"
    })
  }
  else if (registerForm.value.password !== repassword.value) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: 'Passpassword are not consistent,<br/>Please reenter the password!',
      type:"warning"
    })
    registerForm.value.password = ""
    repassword.value = ""
  }else {
      formData.append("username",registerForm.value.username)
      formData.append("password",registerForm.value.password)
      formData.append("file",file.value.files[0])
      formData.append("email",registerForm.value.email)
      post.register(formData).then((res:any)=>{
           if(res.code==200)
           {
             ElMessage({
               dangerouslyUseHTMLString: true,
               message: res.msg+"去登录!",
               type:"success"
             })
             tologin()
           }else {
             ElMessage({
               dangerouslyUseHTMLString: true,
               message: res.msg+"请重试!",
               type:"error"
             })
             resetRegister()
           }
           console.log(res);
      })
  }

}
const resetLogin = ()=> {
  form.value.username = ""
  form.value.password = ""
}
const resetRegister = ()=> {
  registerForm.value.username = ""
  registerForm.value.password = ""
  registerForm.value.email = ""
  repassword.value = ""
}

const upload = ()=>{
    console.log(file.value.files);
    file.value.click()
}
const inputChange=(e)=>{
  const files = e.target.files
  if(files.length!=0){
     isdisplay.value="none"
  }
  // 回显
  const read = new FileReader()
  read.readAsDataURL(files[0])
  read.onload = ()=>{
    // console.log(read.result);
    url.value = read.result
  }

}
</script>

<template>
  <div class="background"></div>
  <div id="sigin">
    <div class="container">
      <div :class="logins">
        <h3>Welcome to the Login</h3>
        <div class="slide"></div>
        <div class="form">
          <label>UserName:</label>
          <div class="input-box">
            <my-icon  icon-name="videoicon_user_name"></my-icon>
            <input v-model="form.username" type="text" placeholder="you name">
          </div>
          <label>PassWord&nbsp:</label>
          <div class="input-box">
            <my-icon  icon-name="videodenglu-mima"></my-icon>
            <input v-model="form.password" type="password" placeholder="password">
          </div>
          <div class="submit">
            <button @click="login" class="button">
              <my-icon icon-name="videosubmit-o"></my-icon>
              Submit
            </button>
            <button @click="resetLogin" class="button">
              <my-icon icon-name="videoReset"></my-icon>
              Reset
            </button>
          </div>
          <div class="exchange">
            Has not an account?<a @click="toregister" href="#">Register Now</a>
          </div>
        </div>
      </div>
      <div :class="registers">
        <h3>Welcome to the Register</h3>
        <div class="slide"></div>
        <div class="form">
          <label>UserName:</label>
          <div class="input-box">
            <my-icon  icon-name="videoicon_user_name"></my-icon>
            <input v-model="registerForm.username" type="text" placeholder="you name">
          </div>
          <label>PassWord&nbsp:</label>
          <div class="input-box">
            <my-icon  icon-name="videodenglu-mima"></my-icon>
            <input v-model="registerForm.password" type="password" placeholder="password">
          </div>
          <label>RePassWord&nbsp:</label>
          <div class="input-box">
            <my-icon  icon-name="videoquanxian"></my-icon>
            <input v-model="repassword" type="password" placeholder="password">
          </div>
          <label>Email&nbsp:</label>
          <div class="input-box">
            <my-icon  icon-name="videoyouxiang"></my-icon>
            <input v-model="registerForm.email" type="email" placeholder="eamil">
          </div>
          <label>Avatar&nbsp:</label>
          <div class="upload">
            <el-avatar size="large" @click="upload()" :src="url"></el-avatar>
<!--            <el-button :style="{display:isdisplay}" round  size="small" type="primary" ">上传文件</el-button>-->
            <input @change="inputChange($event)" style="display: none" ref="file" type="file">
          </div>
          <div class="submit">
            <button @click="register" class="button">
              <my-icon icon-name="videosubmit-o"></my-icon>
              Submit
            </button>
            <button @click="resetRegister" class="button">
              <my-icon icon-name="videoReset"></my-icon>
              Reset
            </button>
          </div>
          <div class="exchange">
            Has not an account?<a @click="tologin" href="#">Login Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/**
* @name: sigin
* @author: zpc20
* @date: 2023-11-04 13:37
* @description：
* @update: 2023-11-04 13:37
*/


#sigin{
  width: 100%;
  height: 96vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.container{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1000px;
  background-color: transparent;
  border-radius: 10px;
  box-shadow: 2px 1px 3px #000000;
}
.conmon{
  width: 100%;
  height: 99.5%;
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(250, 235, 215, 0.5);
  position: absolute;
  top:0;
  left: 0;
  transition: 0.5s;
  backface-visibility: hidden;/*隐藏背面*/
  box-shadow: 2px 1px 3px #000000;
}
.login{
  transform: rotateY(0deg);
}
.register{
  transform: rotateY(-180deg);
}
.loginRote{
  transform: rotateY(180deg);
}
.registerRote{
  transform: rotateY(0deg);
}
.form{
  width: 50%;
}
.input-box{
  width: 100%;
  display: flex;
  margin: 10px 0;
}
input {
  width: 100%;
  height: 30px;
  border: none;
  border-bottom: 3px solid #ccc;
  background-color: transparent;
  color: #000;
  border-image: linear-gradient(to left, #ccc, #578aef) 1;
}

input:focus {
  outline: none;
  background-color: transparent;
  border-bottom: 3px solid cornflowerblue;
  border-image: linear-gradient(to right, #ccc, #578aef) 1;
}
input::placeholder {
  color: #000;
  opacity: .6;
  background-color: transparent;
}

label {
  width: 100%;
  background-color: transparent;
  font-weight: bold;
  font-size: 14px;
}

button {
  margin: 10px 30px;
  display: flex;
  justify-content: center;
  color: black;
  width: 30%;
  text-align: center;
  line-height: 25px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 2px 2px 4px #000;
}
button:hover {
  box-shadow: 2px 2px 2px #ccc;
}

.submit,.upload{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.background{
  background-image: url("@/assets/img/bg2.png");
  background-size: cover;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  opacity: 0.9;
  border-radius: 10px;
}

.slide{
  background-image: url("@/assets/img/b1.jpg");
  background-position: bottom;
  background-size: cover;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  opacity: 0.4;
  border-radius: 10px;
}

.exchange{
  margin-left: 13%;
  font-style: italic;
  font-size: 16px;
  color: #000;
}

a{
  color: wheat;
  font-weight: bold;
  margin: 10px;
}
</style>